<template>
  <div class="searchProdust-container">
    <!-- 导航栏 -->
    <van-dropdown-menu>
      <van-dropdown-item title="综合" disabled />
      <van-dropdown-item
        title="价格"
        v-model="priceValue"
        :options="option"
        @change="priceChange"
      />
      <van-dropdown-item
        title="分类"
        v-model="categoryValue"
        :options="filterCategory"
        @change="CategoryChange"
      />
    </van-dropdown-menu>
    <!-- 没有搜索到商品显示的 -->
    <van-empty
      v-if="goodsList.length === 0"
      image="search"
      description="描述文字"
    />
    <!-- 商品列表 -->
    <Produst v-else :goodsList="goodsList"></Produst>
  </div>
</template>

<script>
// 导入Produst组件
import Produst from '@/components/Produst.vue'
export default {
  name: 'SearchProdust',
  // 注册组件
  components: {
    Produst
  },
  props: {
    filterCategory: {
      type: Array
    },
    goodsList: {
      type: Array
    }
  },
  data() {
    return {
      priceValue: '',
      option: [
        { text: '由高到低', value: 'desc' },
        { text: '由低到高', value: 'asc' }
      ],
      categoryValue: 0
    }
  },
  methods: {
    // 当下拉菜单的选项发生改变，就把改变后的值传给父组件searchPopup
    // 回调参数value就是选中的那个选项的值
    CategoryChange(value) {
      // 子组件向父组件传递数据使用自定义事件
      // 子组件使用this.$emit('自定义事件名', 要传给父组件的值)，将值传给父组件
      this.$emit('CategoryChange', value)
    },
    // 当价格下拉菜单的选项发生变化时，就把选中的选项的值传给父组件searchPopup
    // 回调参数value就是下拉菜单选中的值
    priceChange(value) {
      // 子组件向父组件床底数据使用自定义事件
      // 子组件使用this.$emit('自定义事件名', 要传给父组件的数据),将数据传给父组件
      this.$emit('priceChange', value)
    }
  },
  beforeUpdate() {
    this.filterCategory.map(item => {
      if (item.checked) {
        this.value2 = item.value
      }
    })
  }
}
</script>

<style lang="less" scoped></style>
